<template>
    <div class="gr">
        <div v-show="flag==1">
           <Title/>
        <div class="gr_mokuai">
            <div class="dang_mokuai" v-for="(item,index) in arr" :key="index" @click="tiaozhuan(item.tzlj)">
                        <div class="tu"><img :src="require('../assets/images/'+item.imgsrc)" height="40px"></div>
                        <p style="font-size:16px">{{item.bt}}</p>
                        <p style="font-size:12px">{{item.ybt}}</p>
            </div>
        </div>
        </div>
         <Grzx v-show="flag==3" :brr="brr"/>
        <div class="dibu">
          <div :class="indexa==1?'active':''" @click="qiehuan(1)">
              <img :src="require('../assets/images/'+(indexa==1?xitong:shouye))" height="50%" alt="">
            <br>系统功能
          </div>
          <div :class="indexa==2?'active':''" @click="qiehuan(2)" style="padding-top:4px">
              <i class="iconfont icon-ai-message" :style="'color:#'+(indexa==2?'003399':'cccc')+';font-size:40px'"></i>
              <br>联系
              </div>
          <div :class="indexa==3?'active':''"  @click="qiehuan(3)">
              <img :src="require('../assets/images/'+(indexa==3?rgzxa:rgzxb))" height="50%" alt="">
              <br>个人中心
            </div>
        </div>
    </div>
</template>

<script>
import Title from '../components/title.vue'
import Grzx from '../components/grzx.vue'
import {usersversion,usersinfo} from '../requset/api'
export default {
    data () {
        return { 
          //系统功能的跟换
          xitong:'系统功能.png',
          shouye:'矢量智能对象-2.png',
          //消息的更换
          //个人中心的更换
          rgzxa:'矢量智能对象.png',
          rgzxb:'个人中心.png',
          indexa:1,
          //页面显示 1代表系统功能 3代表个人中心
          flag:1,
          arr:[
              {bt:'我的客户',imgsrc:'yonghu.png',ybt:'MY CUENTS',tzlj:'/Myclients'},
              {bt:'客户关怀',imgsrc:'客户关怀.png',ybt:'CUSTOMER',tzlj:''},
              {bt:'消息中心',imgsrc:'消息中心.png',ybt:'NEWS',tzlj:'/news'},
              {bt:'物流单',imgsrc:'物流单.png',ybt:'LOGISTICS',tzlj:'/Logisticslist'},
              {bt:'发货单',imgsrc:'yonghu.png',ybt:'Invoice',tzlj:'/Invoice'},
              ],
           //用户信息详情
           brr:{}
        }
    },
    methods:{ 
        qiehuan(i){
        this.indexa=i
        this.flag=i
        if(i==3){
            usersinfo().then(res=>{
               if(res.errCode==0){
                   this.brr =res.data
                //    console.log(this.brr);
               }
            })
        }
        },
        //跳转页面 
        tiaozhuan(i){
          this.$router.push(i)
        }
    },
    components:{
        Title,Grzx
    }
}
</script>
 
<style lang = "less" scoped>
.gr{
   position: relative;
   background: #f5f5f5;
   width: 100%;
   min-height: 100vh;
    .gr_mokuai{
        padding:25px 50px 20px ;
        background-color:#f2f2f2;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 65px;
        .dang_mokuai{
            padding-top: 10px;
            width: 48%;
            background: #fff;
            height: 175px;
            margin-bottom: 10px;
            text-align: center;
            box-sizing: border-box;
            p{
                margin: 10px;
            }
            .tu{
                width: 60%;
                height: 75px;
                margin: auto;
                line-height: 75px;
                padding-top: 20px;
                box-sizing: border-box;
            }
        }
    }
    .dibu{
        position: fixed;
        left: 0;
        bottom: -1px;
        height: 65px;
        background: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        div{
            font-size: 14px;
            text-align: center;
            img{    
                margin-top: 10px;
            }
            width: 32%;
            
        }
    }
}
.active{
    color: #003399!important;
}
</style>